<template>
	<view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove">
		<view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
			<u-icon
				:name="activeIndex > index ? elActiveIcon : inactiveIcon"
				@click="click(index + 1, $event)"
				:color="activeIndex > index ? elActiveColor : inactiveColor"
				:custom-style="{
					fontSize: size + 'rpx',
					padding: `0 ${gutter / 2 + 'rpx'}`
				}"
				:custom-prefix="customPrefix"
				:show-decimal-icon="showDecimalIcon(index)"
				:percent="decimal"
				:inactive-color="inactiveColor"
			></u-icon>
		</view>
	</view>
</template>

<script>

export default {
	name: 'u-rate',
	props: {
		
		
		value: {
			type: [Number, String],
			default: -1
		},
		
		count: {
			type: [Number, String],
			default: 5
		},
		
		
		current: {
			type: [Number, String],
			default: 0
		},
		
		disabled: {
			type: Boolean,
			default: false
		},
		
		size: {
			type: [Number, String],
			default: 32
		},
		
		inactiveColor: {
			type: String,
			default: '#b2b2b2'
		},
		
		activeColor: {
			type: String,
			default: '#FA3534'
		},
		
		gutter: {
			type: [Number, String],
			default: 10
		},
		
		minCount: {
			type: [Number, String],
			default: 0
		},
		
		allowHalf: {
			type: Boolean,
			default: false
		},
		
		activeIcon: {
			type: String,
			default: 'star-fill'
		},
		
		inactiveIcon: {
			type: String,
			default: 'star'
		},
		
		customPrefix: {
			type: String,
			default: 'uicon'
		},
		colors: {
			type: Array,
			default() {
				return []
			}
		},
		icons: {
			type: Array,
			default() {
				return []
			}
		}
	},
	data() {
		return {
			
			elId: this.$u.guid(),
			elClass: this.$u.guid(),
			starBoxLeft: 0, 
			
			activeIndex: this.value != -1 ? this.value : this.current,
			starWidth: 0, 
			starWidthArr: [] 
		}
	},
	watch: {
		current(val) {
			this.activeIndex = val
		},
		value(val) {
			this.activeIndex = val
		}
	},
	computed: {
		decimal() {
			if (this.disabled) {
				return this.activeIndex * 100 % 100
			} else if (this.allowHalf) {
				return 50
			}
		},
		elActiveIcon() {
			const len = this.icons.length
			
			
			
			if (len && len <= this.count) {
				const step = Math.round(this.activeIndex / Math.round(this.count / len))
				if (step < 1) return this.icons[0]
				if (step > len) return this.icons[len - 1]
				return this.icons[step - 1]
			}
			return this.activeIcon
		},
		elActiveColor() {
			const len = this.colors.length
			
			
			if (len && len <= this.count) {
				const step = Math.round(this.activeIndex / Math.round(this.count / len))
				if (step < 1) return this.colors[0]
				if (step > len) return this.colors[len - 1]
				return this.colors[step - 1]
			}
			return this.activeColor
		}
	},
	methods: {
		
		getElRectById() {
			
			this.$uGetRect('#' + this.elId).then(res => {
				this.starBoxLeft = res.left
			})
		},
		
		getElRectByClass() {
			
			this.$uGetRect('.' + this.elClass).then(res => {
				this.starWidth = res.width
				
				for (let i = 0; i < this.count; i++) {
					this.starWidthArr[i] = (i + 1) * this.starWidth
				}
			})
		},
		
		touchMove(e) {
			if (this.disabled) {
				return
			}
			if (!e.changedTouches[0]) {
				return
			}
			const movePageX = e.changedTouches[0].pageX
			
			const distance = movePageX - this.starBoxLeft

			
			if (distance <= 0) {
				this.activeIndex = 0
			}
			
			let index = Math.ceil(distance / this.starWidth)
			this.activeIndex = index > this.count ? this.count : index
			
			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
			this.emitEvent()
		},
		
		click(index, e) {
			if (this.disabled) {
				return
			}
			
			if (this.allowHalf) {
			}
			
			if (index == 1) {
				if (this.activeIndex == 1) {
					this.activeIndex = 0
				} else {
					this.activeIndex = 1
				}
			} else {
				this.activeIndex = index
			}
			
			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
			this.emitEvent()
		},
		
		emitEvent() {
			
			this.$emit('change', this.activeIndex)
			
			if (this.value != -1) {
				this.$emit('input', this.activeIndex)
			}
		},
		showDecimalIcon(index) {
			return this.disabled && parseInt(this.activeIndex) === index
		}
	},
	mounted() {
		this.getElRectById()
		this.getElRectByClass()
	}
}
</script>

<style scoped lang="scss">
@import "../../libs/css/style.components.scss";

.u-rate {
	display: -webkit-inline-flex;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.u-icon {
	box-sizing: border-box;
}
</style>
